<template>
  <div class="c-send-code">
    <a-input placeholder="请输入验证码" :value="value" @input="handleInput" :max-length="6" allow-clear>
      <span slot="prefix" class="iconfont iconmima input-prefix" v-if="inputPrefix === true"></span>
    </a-input>
    <a-button type="primary" @click="sendCode" class="send-btn" :disabled="sendStatus === $enums.SendCodeStatus.done" :loading="sendStatus === $enums.SendCodeStatus.doing">{{ btnText }}</a-button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Model, Emit } from "vue-property-decorator";
import { Input, Button } from "ant-design-vue";

@Component({
  name: "CSendCode",
  components: {
    AInput: Input,
    AButton: Button
  }
})
export default class CSendCode extends Vue {
  @Model("input") value!: string;

  // 手机号码
  @Prop({ default: "" }) phonenumber!: string;

  // 是否登陆发送的短信
  @Prop({ default: false }) isLogin!: boolean;

  @Prop({ default: false }) inputPrefix!: boolean;

  private sendStatus = this.$enums.SendCodeStatus.undo;
  private btnText = this.$enums.SendCodeText.undo;
  private countTime = 60;

  private beforeSend() {
    this.$message.destroy();
    if (!this.phonenumber || !this.$tools.checkPhone(this.phonenumber)) {
      this.$message.error("您的手机号码格式不正确");
      return false;
    }

    return true;
  }

  private async sendCode() {
    const status = this.sendStatus;

    if (this.beforeSend()) {
      this.sendStatus = this.$enums.SendCodeStatus.doing;
      this.btnText = this.$enums.SendCodeText.doing;
      const res = await this.$api.SendCaptchaSMS({
        phonenumber: this.phonenumber,
        isLogin: this.isLogin,
        token: false
      });

      if (res && res.code === 200) {
        this.sendStatus = this.$enums.SendCodeStatus.done;
        // this.uuid = res.uuid;
        this.countdown();
        this.$emit("afterSend", res);
      } else {
        this.btnText = this.$enums.SendCodeText[status];
        this.sendStatus = status;
      }
    }
  }

  /**
   * 重发短信验证码倒计时
   */
  private countdown() {
    let left = this.countTime;
    this.btnText = `${this.$enums.SendCodeText.reset}(${left})`;

    const timer = window.setInterval(() => {
      left--;
      if (left === 0) {
        clearInterval(timer);
        this.btnText = this.$enums.SendCodeText.reset;
        this.sendStatus = this.$enums.SendCodeStatus.reset;
      } else {
        this.btnText = `${this.$enums.SendCodeText.reset}(${left})`;
      }
    }, 1000);
  }

  @Emit("input")
  handleInput(event: any) {
    return event.target.value;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.c-send-code {
  .scale(margin-bottom, 30px);
  display: flex;
  align-items: center;
  width: 100%;

  &:last-child {
    margin-bottom: 0;
  }

  .ant-input-affix-wrapper {
    height: 100%;
  }

  /deep/.ant-input {
    border: 0;
    height: 100%;
  }

  .send-btn {
    cursor: pointer;
    padding: 0 16px;
    flex-shrink: 0;
    height: 100%;
    border-radius: 0;

    &[disabled] {
      color: white;
    }
  }
}
</style>
